<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>递归组件</title>

</head>
<body>
<div id="app">
   <btn inline-template>
       <ul>
           <!--子组件apples2属于子组件本身的作用域-->
           <li v-for="apple in apples2">{{apple}}</li>
       </ul>

   </btn>

</div>

<template id="btn">
    <ul>
        <!--子组件apples2属于子组件本身的作用域-->
        <li v-for="apple in apples2">{{apple}}</li>
    </ul>
</template>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    // 可以使用 `v-on:keyup.f1`
    //Vue.config.keyCodes.f1 = 112


    const btn = {
         //template: "#btn",
        data() {
            return {
                apples2:[1,2,3,4,5]
            }
        }
    };

    const btn2 = {
        name:'btn2',
        template: `<div>
<h4>我递归我自己</h4>
<btn2></btn2>
</div>


`

    };

    const vm = new Vue({
        el: "#app",
        data: {
            count:1
        },
        components: {
            btn: btn,
            btn2:btn2
        },
        created: function () {

        },
        mounted: function () {

        },
        methods: {

        },
        computed: {

        }
    })


</script>
</body>
</html>
